<template>
    <!-- <el-button style="background-color: #b3e19d;" :icon="Fold" size="small" @click="isCollapse = !isCollapse" /> -->
    <el-menu active-text-color="#606266" background-color="rgb(221,230,237)" class="el-menu-vertical-demo"
        default-active="2" text-color="rgb(70,103,154)" @open="handleOpen" @close="handleClose" router
        :collapse="isCollapse" unique-opened>
        <el-sub-menu :index="index" :key="key + index" v-for="(m, index) in menuStore.getChildren4me(1)">
            <template #title>
                <el-icon>
                    <component :is="getIcon(m.icon)" />
                </el-icon>
                <span>{{ m.name }}</span>
            </template>
            
            <!-- 处理二级菜单 -->
            <template v-for="(sm, smIndex) in menuStore.getChildren4me(m.id)" :key="'sm' + smIndex">
                <!-- 如果二级菜单有子菜单，则渲染为 sub-menu -->
                <el-sub-menu v-if="menuStore.getChildren4me(sm.id).length > 0" :index="sm.path || sm.id.toString()">
                    <template #title>
                        <el-icon v-if="sm.icon">
                            <component :is="getIcon(sm.icon)" />
                        </el-icon>
                        <span>{{ sm.name }}</span>
                    </template>
                    <!-- 渲染三级菜单 -->
                    <el-menu-item v-for="(tm, tmIndex) in menuStore.getChildren4me(sm.id)" 
                        :key="'tm' + tmIndex" 
                        :index="normalizePath(tm.path)">
                        <span>{{ tm.name }}</span>
                    </el-menu-item>
                </el-sub-menu>
                <!-- 如果二级菜单没有子菜单，则渲染为 menu-item -->
                <el-menu-item v-else :index="normalizePath(sm.path)" :style="setbcgd">
                    <span>{{ sm.name }}</span>
                </el-menu-item>
            </template>
        </el-sub-menu>
    </el-menu>
    <div style="display: flex; align-content: center;">
        <!-- 拖拽vue.draggable网址：https://www.itxst.com/vue-draggable-next/tutorial.html -->

        <!-- <draggable :list="arr" delay="500" animation="200" @start="onStart" @end="onEnd">
            <template #item="{ element }">
                <div class="item">
                    <el-button>
                        <el-icon>
                            <HomeFilled />
                        </el-icon>
                    {{ element.name }}
                    </el-button>
                </div>
            </template>
        </draggable> -->

        <!-- <draggable v-model="buttons"> -->
        <!-- <template v-for="button in buttons"> -->
        <!-- <div :key="button.id" v-draggable-item> -->
        <!-- <el-button @click="handleClick()" circle size="large" style="margin-top: 400px;margin-left: 100px;">
            <el-icon>
                <HomeFilled />
            </el-icon>
        </el-button> -->
        <!-- </div> -->
        <!-- </template> -->
        <!-- </draggable> -->
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
// import { useRouter } from 'vue-router'
import { GoldMedal, Brush, Bicycle, Bowl, Operation } from '@element-plus/icons-vue'
import { storeToRefs } from 'pinia'
import { useMenuStore } from "../../../stores/menu"

const menuStore = useMenuStore()
const { menutree } = storeToRefs(menuStore)

/**
 * 根据不同字符串，返回不同Icon组件
 * @param {string } icon
 */
const getIcon = (icon) => {
    switch (icon) {
        case 'GoldMedal':
            return GoldMedal
        case 'Brush':
            return Brush
        case 'Bicycle':
            return Bicycle
        case 'Bowl':
            return Bowl
        case 'Operation':
            return Operation
    }
}

/**
 * 规范化路径，处理数据库中的路径格式
 * @param {string} path 
 */
const normalizePath = (path) => {
    if (!path) return '';
    
    // 现在数据库中的路径已经是标准格式，不再需要特殊处理
    // 只需确保不带前导斜杠
    if (path.startsWith('/')) {
        return path.substring(1);
    }
    return path;
}

const isCollapse = ref(false);
const roleId = localStorage.getItem('roleId')
// console.log(roleId);

// const buttons = ref([
//     { id: 1, text: '拖拽按钮', route: 'about' },
//     // 可以添加更多的按钮对象
// ]);

// const router = useRouter()
// function handleClick() {
//     router.push('/About'); // 跳转到指定路由
// }

// const arr = ref({
//     list: [
//         {
//             name: "a",
//             id: 1
//         }, {
//             name: "b",
//             id: 2
//         }
//     ]
// })

// const onStart = () => {
//     console.log("onStart");
// }

// const onEnd = () => {
//     console.log("onEnd");
//     // this.drag = true;
// }

onMounted(async () => {
    try {
        await menuStore.load4MeByLists()
    } catch (error) {
        console.error('加载菜单失败:', error)
    }
})

const handleOpen = (key, keyPath) => {
    console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
    console.log(key, keyPath)
}
// menuStore.loadAllByLists()
</script>

<style lang="scss" scoped>
.el-button {
    width: 100%;
}

.el-menu {
    border-right: 0px solid;
}

.el-menu-item .is-active {
    background-color: rgb(78, 118, 168) !important;
}

[v-draggable-item] {
    display: contents;
}
</style>